<template>
  <div id="addQuestion">
    <div class="content">
      <a-form
        :model="form"
        auto-label-width="true"
        direction="horizontal"
        style="margin-top: 10px"
        @submit="questionSubmit()"
      >
        <a-form-item field="title" label="标题">
          <a-input v-model="form.title" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item field="tags" label="标签">
          <a-input-tag
            v-model="form.tags"
            allow-clear
            placeholder="请选择标签"
          />
        </a-form-item>
        <a-form-item field="content" label="内容">
          <MdEdit :handle-change="contentChange" :value="form.content" />
        </a-form-item>
        <a-form-item field="answer" label="答案">
          <MdEdit :handle-change="answerChange" :value="form.answer" />
        </a-form-item>

        <a-form-item :content-flex="false" label="判题设置">
          <a-space direction="vertical" style="min-width: 450px">
            <a-form-item field="judgeConfig.timeLimit" label="时间限制:">
              <a-input-number
                v-model="form.judgeConfig.timeLimit"
                min="0"
                mode="button"
                placeholder="请输入时间限制"
                size="large"
              />
            </a-form-item>
            <a-form-item field="judgeConfig.memoryLimit" label="内存限制:">
              <a-input-number
                v-model="form.judgeConfig.memoryLimit"
                min="0"
                mode="button"
                placeholder="请输入内存限制"
                size="large"
              />
            </a-form-item>
            <a-form-item field="judgeConfig.stackLimit" label="堆栈限制:">
              <a-input-number
                v-model="form.judgeConfig.stackLimit"
                min="0"
                mode="button"
                placeholder="请输入堆栈限制"
                size="large"
              />
            </a-form-item>
          </a-space>
        </a-form-item>
        <a-form-item
          v-for="(judeCaseItem, index) of form.judgeCase"
          :key="index"
          :label="`测试用例${index}`"
        >
          <a-space direction="vertical" style="min-width: 520px">
            <a-form-item
              :key="index"
              :field="`judeCaseItem[${index}].input`"
              :label="`输入用例-${index}`"
            >
              <a-input v-model="judeCaseItem.input" placeholder="输入示例" />
            </a-form-item>
            <a-form-item
              :key="index"
              :field="`judeCaseItem[${index}].output`"
              :label="`输出用例-${index}`"
            >
              <a-input v-model="judeCaseItem.output" placeholder="输出示例" />
            </a-form-item>
            <a-form-item>
              <a-col :span="19"></a-col>
              <a-col>
                <a-button
                  :style="{ marginLeft: '10px' }"
                  status="danger"
                  type="dashed"
                  @click="handleDelete(index)"
                  >删除
                </a-button>
              </a-col>
            </a-form-item>
          </a-space>
        </a-form-item>
        <a-form-item>
          <a-button status="success" type="dashed" @click="handleAdd()"
            >新增测试用例
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" type="primary">提交</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import MdEdit from "@/components/MdEdit.vue";
import { QuestionControllerService } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRoute } from "vue-router";

// 数据定义
const form = ref({
  answer: "",
  content: "",
  judgeCase: [
    {
      input: "",
      output: "",
    },
  ],
  judgeConfig: {
    memoryLimit: 0,
    stackLimit: 0,
    timeLimit: 0,
  },
  tags: [],
  title: "",
}) as any;
const route = useRoute();
const id = route.params.id as unknown as number;

//类型转化
const transFormMessage = (res: any) => {
  if (res.judgeCase) {
    res.judgeCase = JSON.parse(res.judgeCase);
  } else {
    res.judgeCase = [];
  }

  if (res.judgeConfig) {
    res.judgeConfig = JSON.parse(res.judgeConfig);
  } else {
    res.judgeConfig = {};
  }

  if (res.tags) {
    res.tags = JSON.parse(res.tags);
  } else {
    res.tags = [];
  }
  return res;
};

// 界面初始时加载的数据
const loads = async () => {
  if (!id) {
    return;
  }
  const res = await QuestionControllerService.getQuestionByIdUsingGet(id);
  if (res.code === 0) {
    form.value = transFormMessage(res.data);
  } else {
    message.error("数据获取失败" + res.message);
  }
};
onMounted(loads);

// 函数
const handleAdd = () => {
  if (form.value.judgeCase) {
    form.value.judgeCase.push({
      input: "",
      output: "",
    });
  }
};
const handleDelete = (index: number) => {
  form.value.judgeCase.splice(index, 1);
};
// 提交
const questionSubmit = async () => {
  console.log(form.value);
  const res = await QuestionControllerService.updateQuestionUsingPost(
    form.value
  );
  if (res.code === 0) {
    message.success("更新成功");
  } else {
    message.error("更新失败" + res.message);
  }
};
// 编辑器函数
const answerChange = (v: string) => {
  form.value.answer = v;
};
const contentChange = (v: string) => {
  form.value.content = v;
};
</script>

<style scoped>
#addQuestion {
}

.content {
  min-width: 800px;
  width: 80vw;
  margin: auto;
}
</style>
